<!-- FILE:templates/apps/memcache.html -->
<div class="row-fluid">
    <div class="span12">
        <div class="box chart gradient">
            {% set app_page_title="Global Memcache Statistics" %}
            <div class="content">
                <div style="height: 400px;" id="mem-flot"></div>
            </div><!-- end content -->
        </div><!-- end box -->
    </div><!-- end span6 -->
</div><!-- end .row -->
<script>
/**
 * Updates the pie chart that tells users the status of their
 * memcache usage.
 */
function update_mem_stats() {
  $.ajax({
    url: "/apps/stats/memcache"
  }).done(
    function(json_data) {
      var stats_info = JSON.parse(json_data);
      var all_stats = [
        { label: "Hits: " + stats_info['hits'], data: [[1, stats_info['hits']]]},
        { label: "Misses: " + stats_info['misses'], data: [[1, stats_info['misses']]]},
      ];
      $('#mem-flot').text('');
      if($("#mem-flot").closest(".panel-collapse").height() >0) {
          $.plot('#mem-flot', all_stats, {
              series: {
                  pie: {
                      show: true,
                      label: {
                          show: true,
                          radius: 3 / 4,
                          formatter: function (label, series) {
                              return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
                          },
                          background: {
                              opacity: 0.5,
                              color: '#000'
                          }
                      }
                  }
              },
              legend: {
                  show: true
              }
          });
      }
    });
}
</script>